<template>
    <div class="tmpl">
        <div class="desc">
            <div class="title">
                <h4 v-text='info.title'></h4>
                <p>{{info.add_time | datefmt('YYYY:MM:DD') }} {{info.click}}次浏览 </p>
                <p class='line'></p>
            </div>
            <div class="imgList">
                <div class="mui-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li  v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            <img class="preview-img" :src='item.src' height="100" @click="$preview.open(index, list)">
                        </li>
                    </ul>
                </div>
            </div>

            <div class="detailed" v-html="info.content"></div>

        </div>
        <!--添加评论区域-->
        <comment :id='id'></comment>
    </div>
</template>

<script>
    import comment from '../subcom/comment.vue';
    import common from '../../kits/common.js';
    export default {
        components: {
            comment
        },
        data() {
            return {
                id: 0,
                info: {},
                list:[]
            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getimagesinfo(this.id);
            this.getimglist(this.id);
        },
        methods: {
            getimagesinfo(id) {
                var url = common.apidomain + '/api/getimageInfo/' + id;
                this.$http.get(url).then((res) => {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.info = res.body.message[0];
                })
            },
            getimglist(id){
                var url = common.apidomain + '/api/getthumimages/' + id;
                this.$http.get(url).then((res) => {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.list = res.body.message;
                    this.list.forEach((v)=>{
                        v.w = 1200;
                        v.h = 900;
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .desc {
        padding: 5px;
    }

    .title {
        padding: 5px;
    }

    .title h4 {
        color: #0099ff;
    }

    .title p {
        color: rgba(0, 0, 0, .5);
    }
    .mui-content img{
        height: 100px;
        width: 100px;
    }
    .mui-content .mui-table-view{
        background-color: #fff;
    }

</style>